<template>
  <div class="app-container">
    <el-card>
      <TitleLine title="基础信息" />
      <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="100px">
        <!-- 平台 -->
        <el-form-item label="选择平台" prop="platform">
          <el-select placeholder="请选择平台" v-model="formData.platform" clearable>
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in platformList"
              :key="item.label"
            />
          </el-select>
        </el-form-item>

        <!-- 平台logo -->
        <el-form-item label="平台logo" prop="logo">
          <upload-image
            :isShowTip="true"
            :lazy="true"
            :file-type="['jpg', 'png', 'jpeg']"
            file-pixel="80*80"
            :file-size="1"
            :limit="1"
            :response-fn="handlePlatformLogo"
            @on-change="uploadAvatarUrlChange"
            v-model="formData.logo"
          />
        </el-form-item>

        <!-- 主营业务 -->
        <el-form-item label="主营业务" prop="mainBusiness">
          <el-input
            type="textarea"
            maxlength="200"
            :rows="2"
            placeholder="请输入内容"
            v-model="formData.mainBusiness"
          />
        </el-form-item>

        <!-- 平台性质 -->
        <el-form-item label="平台性质" prop="characteristic">
          <el-select v-model="formData.characteristic">
            <el-option label="第三方平台" :value="1" />
          </el-select>
        </el-form-item>

        <!-- 兑换概率 -->
        <el-form-item label="兑换概率" prop="platformpointFirstr">
          <div class="box">
            <div class="hd">
              <span>该平台1积分</span>
              <span class="text">兑换</span>
              <el-input
                placeholder="好物平台N积分"
                v-model="formData.exchangeRate"
                style="width: 200px"
              />
            </div>
            <div class="bd">请输入该平台和好物平台之间的兑换积分汇率</div>
          </div>
        </el-form-item>

        <!-- 联系人 -->
        <el-form-item label="联系人" prop="touchName">
          <el-input v-model="formData.touchName" placeholder="请输入联系人" style="width: 400px" />
        </el-form-item>

        <!-- 联系电话 -->
        <el-form-item label="联系电话" prop="touchMobile">
          <el-input
            v-model="formData.touchMobile"
            placeholder="请输入联系电话"
            style="width: 400px"
          />
        </el-form-item>

        <!-- 联系地址 -->
        <el-form-item label="联系地址" prop="joinAreaId">
          <AreaMultipleSelect ref="areaMultipleSelect" type="update" v-model="joinArea" />
        </el-form-item>

        <!-- 请输入联系人详细地址 -->
        <el-form-item prop="detailAddress" class="specical">
          <!-- 详细地址 -->
          <el-input
            class="mt-20"
            v-model="formData.detailAddress"
            placeholder="请输入详细地址"
            style="width: 400px"
          />
        </el-form-item>

        <!-- 账号状态 -->
        <el-form-item label="账号状态" required>
          <el-radio-group v-model="formData.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">冻结</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item class="flex justify-center">
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
          <el-button @click="resetForm('ruleForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
/**
 * @description form.js :页面静态数据
 * @platformList 平台列表
 *
 */
import { platformList, rules } from './form'
export default {
  data() {
    return {
      // 表单参数
      formData: {
        // 平台logo
        logo: '',

        // 选中平台
        platform: '',

        // 主营业务
        mainBusiness: '',

        // 平台性质
        characteristic: 1,

        // 可兑换好物积分数
        exchangeRate: '',

        // 联系人
        touchName: '',

        // 联系人电话
        touchMobile: '',

        provinceId: '',
        provinceName: '',
        cityId: '',
        cityName: '',
        districtId: '',
        districtName: '',

        // 详细地址
        detailAddress: '',

        // 状态
        status: 1
      },

      // 平台列表
      platformList,

      joinArea: {
        provinceObj: {
          id: '',
          name: ''
        },
        cityObj: {
          id: '',
          name: ''
        },
        countyObj: {
          id: '',
          name: ''
        }
      }
    }
  },
  computed: {
    rules() {
      // 校验加盟区域
      const validateJoinAreaId = (rule, value, callback) => {
        if (!this.joinArea.provinceObj.id) {
          callback(new Error('请选择省份'))
        } else if (!this.joinArea.cityObj.id) {
          callback(new Error('请选择城市'))
        } else if (!this.joinArea.countyObj.id) {
          callback(new Error('请选择联系区县'))
        } else {
          callback()
        }
      }

      return {
        ...rules,
        joinAreaId: {
          required: true,
          validator: validateJoinAreaId,
          trigger: 'change'
        }
      }
    }
  },
  created() {
    this.handleLoad()
  },
  methods: {
    // 获取详情
    async handleLoad() {
      if (!this.$route.query.id) return
      const { data } = await this.$http.user.platformFirm.detail({ id: this.$route.query.id })
      this.joinArea = {
        provinceObj: {
          id: String(data.provinceId),
          name: data.provinceName
        },
        cityObj: {
          id: String(data.cityId),
          name: data.cityName
        },
        countyObj: {
          id: String(data.districtId),
          name: data.districtName
        }
      }

      // 地址组件回显
      this.$refs.areaMultipleSelect.showBackData({
        provinceObj: this.joinArea.provinceObj,
        cityObj: this.joinArea.cityObj
      })

      // 常规数据
      for (let i in this.formData) {
        this.formData[i] = data[i]
      }
    },
    // 上传平台logo
    handlePlatformLogo(response) {
      return response.data.url
    },

    uploadAvatarUrlChange() {
      if (this.formData.logo) {
        this.$refs.elForm.clearValidate('logo')
      }
    },

    submitForm() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          const { formData, joinArea } = this
          formData.provinceId = joinArea.provinceObj.id
          formData.provinceName = joinArea.provinceObj.name
          formData.cityId = joinArea.cityObj.id
          formData.cityName = joinArea.cityObj.name
          formData.districtId = joinArea.countyObj.id
          formData.districtName = joinArea.countyObj.name

          // 新增
          if (!this.$route.query.id) {
            try {
              await this.$http.user.platformFirm.add(formData)
              this.$message.success('新增成功')
              this.resetForm()
            } catch (error) {
              this.$message.error(error)
            }
          }
          // 编辑
          else {
            try {
              formData.id = this.$route.query.id
              await this.$http.user.platformFirm.edit(formData)
              this.$message.success('编辑成功')
              this.resetForm()
            } catch (error) {
              this.$message.error(error)
            }
          }
        } else {
          return false
        }
      })
    },

    resetForm() {
      this.$refs.ruleForm.resetFields()
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  .hd {
    display: flex;
    align-items: center;
  }
  .bd {
    color: #b0b0b0;
  }
  .text {
    margin: 0 20px;
  }
}
.specical {
  /deep/ .el-input {
    margin-top: 0;
  }
}
</style>
